<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html>
<head>
  <title>会员中心 - 活力长者社区</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
  <style>
    :root {
      --primary-color: #28a745;
      --secondary-color: #f8f9fa;
      --card-shadow: 0 4px 8px rgba(0,0,0,0.05);
    }

    body {
      background-color: #f5f7fa;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    .sidebar {
      background-color: white;
      height: 100vh;
      box-shadow: 2px 0 10px rgba(0,0,0,0.05);
      position: fixed;
      z-index: 100;
    }

    .sidebar .nav-link {
      color: #495057;
      border-radius: 5px;
      margin-bottom: 5px;
      padding: 10px 15px;
    }

    .sidebar .nav-link:hover, .sidebar .nav-link.active {
      background-color: rgba(40, 167, 69, 0.1);
      color: var(--primary-color);
    }

    .sidebar .nav-link i {
      margin-right: 10px;
      width: 20px;
      text-align: center;
    }

    .main-content {
      margin-left: 250px;
      padding: 20px;
    }

    .page-header {
      background-color: white;
      padding: 20px;
      border-radius: 10px;
      box-shadow: var(--card-shadow);
      margin-bottom: 25px;
    }

    .dashboard-card {
      background-color: white;
      border-radius: 10px;
      box-shadow: var(--card-shadow);
      padding: 20px;
      margin-bottom: 25px;
      transition: transform 0.3s, box-shadow 0.3s;
      height: 100%;
    }

    .dashboard-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }

    .card-icon {
      font-size: 2.5rem;
      color: var(--primary-color);
      margin-bottom: 15px;
    }

    .card-title {
      font-size: 1.1rem;
      font-weight: 600;
      margin-bottom: 15px;
      color: #343a40;
    }

    .card-action {
      margin-top: 15px;
    }

    .btn-card {
      background-color: var(--primary-color);
      color: white;
      border-radius: 5px;
      padding: 8px 15px;
      font-size: 0.9rem;
      display: block;
      text-align: center;
    }

    .btn-card:hover {
      background-color: #218838;
      color: white;
    }

    .user-info {
      padding: 20px;
      text-align: center;
      border-bottom: 1px solid #e9ecef;
    }

    .user-avatar {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background-color: #e9f5eb;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 15px;
      color: var(--primary-color);
      font-size: 2rem;
    }

    .user-name {
      font-weight: 600;
      margin-bottom: 5px;
    }

    .user-type {
      color: #6c757d;
      font-size: 0.9rem;
    }

    .notification-badge {
      position: absolute;
      top: 5px;
      right: 10px;
      background-color: #dc3545;
      color: white;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      font-size: 0.7rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  </style>
</head>
<body>
<div class="sidebar col-md-3 col-lg-2 d-md-block">
  <div class="user-info">
    <div class="user-avatar">
      <i class="bi bi-person-circle"></i>
    </div>
    <div class="user-name">${memberInfo.memberDetail.realName}</div>
    <div class="user-type">${memberInfo.memberDetail.memberType}</div>
  </div>

  <div class="nav flex-column mt-4">
    <li class="nav-item">
      <a class="nav-link active" href="memberHome.jsp">
        <i class="bi bi-house-door"></i> 首页
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="ViewProfileServlet">
        <i class="bi bi-person"></i> 个人信息
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="HouseListServlet">
        <i class="bi bi-building"></i> 房产管理
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="ViewOccupantsServlet">
        <i class="bi bi-people"></i> 入住人管理
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="serviceHistory.jsp">
        <i class="bi bi-heart"></i> 生活服务
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="login.jsp">
        <i class="bi bi-box-arrow-right"></i> 退出登录
      </a>
    </li>
  </div>
</div>

<div class="main-content">
  <div class="page-header">
    <div class="d-flex justify-content-between align-items-center">
      <div>
        <h2>会员中心</h2>
        <p class="text-muted mb-0">欢迎回来，${memberInfo.memberDetail.realName}！</p>
      </div>
      <div class="d-flex">
        <div class="position-relative me-3">
          <a href="#" class="btn btn-outline-secondary position-relative">
            <i class="bi bi-bell"></i>
          </a>
        </div>
        <div class="dropdown">
          <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
            <i class="bi bi-gear"></i>
          </button>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="ViewProfileServlet">个人设置</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="login.jsp">退出登录</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-md-6">
      <div class="dashboard-card">
        <div class="card-icon">
          <i class="bi bi-person"></i>
        </div>
        <h3 class="card-title">个人信息</h3>
        <p>管理您的个人资料、联系方式和紧急联系人信息</p>
        <div class="card-action">
          <a href="ViewProfileServlet" class="btn-card">查看/编辑信息</a>
        </div>
      </div>
    </div>

    <div class="col-md-6">
      <div class="dashboard-card">
        <div class="card-icon">
          <i class="bi bi-house"></i>
        </div>
        <h3 class="card-title">我的房产</h3>
        <c:choose>
          <c:when test="${not empty memberInfo.purchasedHouses}">
            <p>您已拥有 ${fn:length(memberInfo.purchasedHouses)} 套房产</p>
          </c:when>
          <c:otherwise>
            <p>您尚未购买房产</p>
          </c:otherwise>
        </c:choose>
        <div class="card-action">
          <a href="HouseListServlet" class="btn-card">浏览/购买房产</a>
        </div>
      </div>
    </div>

    <div class="col-md-6">
      <div class="dashboard-card">
        <div class="card-icon">
          <i class="bi bi-people"></i>
        </div>
        <h3 class="card-title">入住人管理</h3>
        <c:choose>
          <c:when test="${not empty memberInfo.occupants && not empty memberInfo.purchasedHouses}">
            <p>您已登记 ${fn:length(memberInfo.occupants)} 位入住人</p>
          </c:when>
          <c:otherwise>
            <p>尚未添加任何入住人</p>
          </c:otherwise>
        </c:choose>
        <div class="card-action">
          <a href="AddOccupantServlet" class="btn-card">添加入住人</a>
          <a href="ViewOccupantsServlet" class="btn-card mt-2">查看入住人</a>
        </div>
      </div>
    </div>

    <div class="col-md-6">
      <div class="dashboard-card">
        <div class="card-icon">
          <i class="bi bi-heart"></i>
        </div>
        <h3 class="card-title">生活服务</h3>
        <c:choose>
          <c:when test="${not empty memberInfo.serviceHistory && not empty memberInfo.purchasedHouses}">
            <p>您有 ${fn:length(memberInfo.serviceHistory)} 条服务记录</p>
          </c:when>
          <c:otherwise>
            <p>尚未申请任何服务</p>
          </c:otherwise>
        </c:choose>
        <div class="card-action">
          <a href="ServiceRequestServlet" class="btn-card">申请新服务</a>
          <a href="ServiceHistoryServlet" class="btn-card mt-2">查看服务记录</a>
        </div>
      </div>
    </div>
  </div>

  <div class="dashboard-card mt-4">
    <h3 class="card-title">最新动态</h3>
    <div class="list-group">
      <a href="#" class="list-group-item list-group-item-action">
        <div class="d-flex w-100 justify-content-between">
          <h5 class="mb-1">社区健康讲座通知</h5>
          <small>3天前</small>
        </div>
        <p class="mb-1">本周六下午2点，社区将举办"老年人健康管理"主题讲座，欢迎各位会员参加。</p>
        <small class="text-muted">社区服务中心</small>
      </a>
      <a href="#" class="list-group-item list-group-item-action">
        <div class="d-flex w-100 justify-content-between">
          <h5 class="mb-1">新楼盘开盘公告</h5>
          <small>1周前</small>
        </div>
        <p class="mb-1">社区公寓现已开放购买，享受早鸟优惠价。</p>
        <small class="text-muted">房产中心</small>
      </a>
      <a href="#" class="list-group-item list-group-item-action">
        <div class="d-flex w-100 justify-content-between">
          <h5 class="mb-1">您的服务申请已受理</h5>
          <small>2天前</small>
        </div>
        <p class="mb-1">您申请的"健康检查"服务已安排，管家将于2023-11-20 10:00上门服务。</p>
        <small class="text-muted">生活服务中心</small>
      </a>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>